/* 清除内外边距 */
* {
	margin: 0;
	padding: 0;
}
/* a标签的默认颜色和默认样式 */
a {
	/* a标签的默认颜色 */
	color: #333;
	/* 去掉超链接的下划线 */
	text-decoration: none;
	/* 移入小手 */
	cursor: pointer;
}
/* a标签有 active 类, 或者悬停, 颜色标绿 */
a.active,
a:hover {
	/* boss专用绿 */
	color: #53cac3;
}
/* 版心原子类 */
.container {
	width: 1170px;
	/* 居中 */
	margin: 0 auto;
}
/* 浮动原子类 */
.fl {
	float: left;
}
.fr {
	float: right;
}
/* 顶部 */
.top {
	width: 100%;
	height: 100px;
}
.top-nav img {
	/* 左浮动 */
	float: left;
	/* 设置上外边距, 挤下来, 形成居中的效果 */
	margin-top: 23px;
}
.top-nav ul {
	/* 外边距, 把ul挤下来, 形成居中的效果 */
	margin-top: 42px;
	/* 字体相关的属性 */
	font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	letter-spacing: 1px;
	/* 左浮动 */
	float: left;
	/* 干掉无序列表的小圆点 */
	list-style: none;
}
.top-nav ul li {
	/* 左浮动, 所有的无序列表排成一行 */
	float: left;
	/* 间隔38像素 */
	margin-left: 38px;
}
.top-nav .android,
.top-nav .android-logo,
.top-nav .line,
.top-nav .iphone-logo,
.top-nav .iphone {
	/* 所有的右浮动 */
	float: right;
}
.top-nav .android,
.top-nav .iphone {
	/* 撑开内容 */
	margin-left: 13px;
	/* 字体效果 */
	font-family: MicrosoftYaHei;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #000000;
	/* 挤到下边, 居中 */
	margin-top: 45px;
	height: 12px;
}
.top-nav .android-logo {
	/* 挤到下边, 居中 */
	margin-top: 42px;
	/* 使用精灵图, 显示图标 */
	width: 17px;
	height: 21px;
	background: url("../img/css_sprites.png") -10px -10px;
}
.top-nav .iphone-logo {
	/* 挤到下边, 居中 */
	margin-top: 42px;
	/* 使用精灵图, 显示图标 */
	width: 16px;
	height: 20px;
	background: url("../img/css_sprites.png") -47px -10px;
}
.top-nav .line {
	/* 居中, 把两边的android和iphone推开 */
	margin: 46px 19px 0 21px;
	width: 1px;
	height: 18px;
	background: url("../img/css_sprites.png") -83px -10px;
}
/* banner区 */
.banner {
	width: 100%;
	height: 398px;
	background-color: olive;
	/* 给了一个背景图片 */
	background-image: url(../img/banner.png);
	background-size: 100% 110%;
	background-position: bottom;
	border: 1px solid transparent;
}
.banner p.title {
	/* 设置字体 */
	font-size: 38px;
	font-weight: normal;
	/* 水平居中 */
	text-align: center;
	/* 行高一倍 */
	line-height: 1;
	letter-spacing: 1px;
	color: #ffffff;
	/* 挤到下边 */
	margin-top: 106px;
}
.banner div.button {
	width: 187px;
	height: 44px;
	border-radius: 22px;
	background-color: #53cac3;
	/* 字体相关属性 */
	font-size: 21px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #ffffff;
	/* 垂直, 水平居中 */
	text-align: center;
	line-height: 44px;
	/* 挤下去 */
	margin: 51px auto 0;
}
/* 主体内容区开始 */
.body {
	width: 100%;
	background-color: #f3f3f3;
	padding-bottom: 1px; /* 因为最后一个孩子的下外边距, 没有办法把父元素撑起来, 给父元素加了一个下内边距, 加边框也可以 */
}
/* 版心内容区开始 */
.body .container-top {
	background-color: #fff;
	height: 436px;
	margin-bottom: 16px;
	position: relative;
	top: -68px;
}
.body .container-top .item {
	width: 388px;
	height: 436px;
	float: left;
	padding: 41px 52px 52px 52px;
	box-sizing: border-box;
}
.item .item-top {
	width: 284px;
	height: 20px;
}
.green-line {
	width: 3px;
	height: 15px;
	background-color: #53cac3;
	margin-top: 4px;
	margin-right: 9px;
}
div.hight-line {
	float: left;
	width: 1px;
	height: 344px;
	margin-top: 44px;
	background-color: #535353;
	opacity: 0.1;
}
.top-title {
	color: #333;
	font-size: 17px;
}
.top-button {
	width: 49px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #666666;
	border: 1px solid #666;
	border-radius: 15px;
}
.top-button a {
	display: inline-block;
	width: 49px;
	height: 20px;
}
.top-button.active a,
.top-button a:hover {
	color: #fff;
}
.item .img-area {
	width: 284px;
	height: 156px;
	margin-top: 42px;
	background-image: url(../img/img1.png);
}
.item .title-area {
	font-size: 20px;
	font-weight: normal;
	line-height: 32px;
	letter-spacing: 0px;
	color: #000000;
	margin-top: 38px;
}
.item .detail-area {
	display: inline-block;
	margin-top: 19px;
	font-size: 14px;
	color: #999;
	/* border: 1px solid #000; */
}
.item .detail-area:hover {
	color: #53cac3;
}
.item .top-button:hover,
.item .top-button.active {
	background-color: #53cac3;
	color: #fff;
	border: 1px solid #53cac3;
}
.body .container-middle {
	height: 726px;
	background-color: #fff;
	margin-bottom: 13px;
	padding: 66px 46px 44px 46px;
	box-sizing: border-box;
	margin-top: -68px;
}
.body .container-middle .item {
	height: 156px;
}
.body .container-middle .item .left {
	float: left;
	position: relative;
}
.body .container-middle .item .left img.tag {
	position: absolute;
	left: -5px;
	top: 12px;
}
.body .container-middle .item .right {
	margin-left: 30px;
	float: left;
	height: 156px;
	width: 764px;
}
.body .container-middle .item .right .title {
	font-size: 20px;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 1;
	color: #000000;
}
.body .container-middle .item .right .content {
	margin-top: 24px;
	font-family: SimSun;
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	letter-spacing: 0px;
	color: #666666;
}
.body .container-middle .item .right .read-all {
	font-family: SimSun;
	font-size: 12px;
	font-weight: normal;
	line-height: 22px;
	letter-spacing: 0px;
}
.body .container-middle .item .right .item-footer {
	margin-top: 25px;
	font-size: 14px;
	font-weight: normal;
	letter-spacing: 0px;
	color: #999999;
}
.body .container-middle .item .right .item-footer .item-left {
	margin-right: 46px;
}
.body .container-middle .item .right .item-footer .item-left a {
	color: #53cac3;
}
.body .container-middle .item .right .item-footer .tag {
	margin-right: 10px;
	width: 9px;
	height: 12px;
	position: relative;
	top: 1px;
}
.body .container-middle .hr {
	width: 1078px;
	height: 1px;
	background-color: #535353;
	opacity: 0.1;
}
.body .container-middle .hr.line1 {
	margin-top: 35px;
	margin-bottom: 12px;
}
.body .container-middle .hr.line2 {
	margin: 37px 0;
}
.body .container-bottom {
	border: 1px solid transparent;
	height: 433px;
	margin-bottom: 29px;
	background-color: #fff;
}
.body .container-bottom .top {
	margin-top: 26px;
	margin-left: 53px;
	height: 19px;
}
.body .container-bottom .bottom {
	height: 316px;
	margin-left: 47px;
	margin-top: 31px;
}
.body .container-bottom .bottom .left {
	width: 645px;
	height: 316px;
}
.body .container-bottom .bottom .left .news {
	border-bottom: 1px dashed #ccc;
	width: 645px;
	height: 110px;
	background-color: #fff;
	padding: 17px 0;
	box-sizing: border-box;
}
.body .container-bottom .bottom .left .news:nth-child(1) {
	margin-bottom: 1px dashed #ccc;
	width: 645px;
	height: 93px;
	background-color: #fff;
	margin-top: 0;
	padding: 0;
}
.body .container-bottom .bottom .left .news .title {
	font-size: 14px;
	font-weight: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #53cac3;
	margin-left: 16px;
	margin-top: 9px;
}
.body .container-bottom .bottom .left .news .content {
	margin-left: 16px;
	margin-top: 11px;
	font-size: 12px;
	font-weight: normal;
	line-height: 20px;
	letter-spacing: 0px;
	color: #999999;
	width: 482px;
}
.body .container-bottom .bottom .right {
	width: 371px;
	height: 316px;
	background-color: #fff;
	margin-left: 59px;
	position: relative;
}
.body .container-bottom .bottom .right .img-desc {
	width: 371px;
	height: 41px;
	background-color: #53cac3;
	position: absolute;
	bottom: 0;
	font-family: MicrosoftYaHei;
	font-size: 16px;
	font-weight: normal;
	line-height: 24px;
	letter-spacing: 0px;
	color: #fefefe;
	text-align: center;
	line-height: 41px;
}
/* 底部区域结束 */
.footer {
	width: 100%;
	height: 233px;
	background-color: #000;
	border: 1px solid transparent;
}
.footer .title {
	text-align: center;
	font-size: 18px;
	font-weight: normal;
	line-height: 1;
	letter-spacing: 0px;
	color: #ffffff;
	margin-top: 66px;
}
.footer .title a {
	color: #ffffff;
}
.footer .title a:hover {
	color: #53cac3;
}
.footer .content {
	text-align: center;
	height: 41px;
	font-size: 13px;
	font-weight: normal;
	letter-spacing: 0px;
	line-height: 2;
	color: #ffffff;
	margin-top: 41px;
}
